<template>
	<view class="home">
		<headTop />
		<view v-for="(item, index) in list1" :key="index" :style="{
				width: `${item.width}%`,
				height: item.type === 'goods' ? '' : `${item.height}px`,
				lineHeight: item.type === 'notice' ? `${item.height}px` : '',
				marginLeft: `${item.marginLeft}%`,
				marginRight: `${item.marginRight}%`,
				marginTop: `${item.marginTop}px`,
				marginBottom: `${item.marginBottom}px`,
				backgroundColor: item.backgroundColor,
				backgroundSize: 'cover',
				backgroundPosition: 'center',
				backgroundRepeat: 'no-repeat',
				borderRadius: '3px'
			}">
			<component :is="componentMap[item.id]" :data="item" />
		</view>
		<zwTabBar :defaultSel="0" :bigIdx="0"></zwTabBar>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";
	import search from "./search/index.vue";
	import swipers from "./swiper/index.vue";
	import notice from "./notice/index.vue";
	import card from "./card/index.vue";
	import recommend from "./recommend/index.vue";
	import goods from "./goods/index.vue";
	import zwTabBar from "@/components/zw-tabbar/zw-tabbar.vue";
	const componentMap = [search, swipers, notice, card, recommend, goods];

	const list1 = ref([
		{
			id: 0,
			name: "搜索框",
			type: "search",
			img: new URL("/@/assets/images/search.png", import.meta.url).href,
			width: 100,
			height: 35,
			marginTop: 0,
			marginBottom: 12,
			marginLeft: 0,
			marginRight: 0,
			backgroundColor: "#fff"
		},
		{
			id: 1,
			name: "轮播图",
			type: "swiper",
			img: new URL("/@/assets/images/swiper.png", import.meta.url).href,
			width: 100,
			height: 150,
			marginTop: 0,
			marginBottom: 12,
			marginLeft: 0,
			marginRight: 0,
			backgroundColor: "#fff"
		},
		{
			id: 2,
			name: "官方公告",
			type: "notice",
			img: new URL("/@/assets/images/notice.png", import.meta.url).href,
			width: 100,
			height: 40,
			marginTop: 0,
			marginBottom: 12,
			marginLeft: 0,
			marginRight: 0,
			backgroundColor: "#fff"
		},
		{
			id: 3,
			name: "卡号系统",
			img: new URL("/@/assets/images/card.png", import.meta.url).href,
			type: "card",
			width: 100,
			height: 80,
			marginTop: 0,
			marginBottom: 12,
			marginLeft: 0,
			marginRight: 0,
			backgroundColor: "#fff"
		},
		{
			id: 4,
			name: "推荐商品",
			type: "recommend",
			img: new URL("/@/assets/images/recommend.png", import.meta.url).href,
			width: 100,
			height: 160,
			marginTop: 0,
			marginBottom: 12,
			marginLeft: 0,
			marginRight: 0,
			backgroundColor: "#fff"
		},
		{
			id: 5,
			name: "商品目录",
			type: "goods",
			img: new URL("/@/assets/images/goods.png", import.meta.url).href,
			width: 100,
			height: 360,
			marginTop: 0,
			marginBottom: 12,
			marginLeft: 0,
			marginRight: 0,
			backgroundColor: "#fff"
		}
	]);
</script>

<style lang="scss" scoped>
	.home {}
</style>